  <template>
  <el-container>
    <el-header>
      <Pagetitle :title="title1" :SecTitle="title2"></Pagetitle>
    </el-header>
    <el-main class="search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" >
        <el-form-item label="时间">
          <el-date-picker
            v-model="formInline.date"
            type="date"
            placeholder="请选择日期"
            value-format="timestamp"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="ID">
          <el-input v-model="formInline.ID" placeholder="请输入ID"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input
            v-model="formInline.name"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input
            v-model="formInline.IDnum"
            placeholder="请输入身份证"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input
            v-model="formInline.tel"
            placeholder="请输入电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="formInline.type" placeholder="请选择类型">
            <el-option label="禁用" value="0"></el-option>
            <el-option label="启用" value="1"></el-option>
            <el-option label="已过期" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchData">筛选</el-button>
        </el-form-item>
        <el-button
          type="primary"
          style="margin: 0px 10px; float: right; margin-right: 10%"
          @click="dialogFormVisible = true"
          >添加</el-button
        >
      </el-form>
      <el-table :data="tableData" style="width: 100%; padding: 10px 10px">
        <el-table-column prop="registerTime" label="发布时间" width="180">
        </el-table-column>
        <el-table-column prop="userId" label="ID" width="120">
        </el-table-column>
        <el-table-column label="近照">
          <template slot-scope="scope">
            <div>
              <el-image
                style="width: 60px; height: 60px; border-radius: 30px"
                :src="scope.row.image"
                fit="fill"
              >
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="phone" label="电话"> </el-table-column>
        <el-table-column prop="contractValidity" label="合同有效期至">
        </el-table-column>
        <el-table-column prop="serviceStatus" label="状态"> </el-table-column>
        <el-table-column prop="t_operation" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button type="text" size="small" @click="editInfo(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              v-if="scope.row.serviceStatus == '服务停止'"
              @click="startServe(scope.row)"
              >开始服务</el-button
            >
            <el-button
              type="text"
              size="small"
              v-else-if="scope.row.serviceStatus == '服务中'"
              @click="stopServe(scope.row)"
              >停止服务</el-button
            >
                <el-button
              type="text"
              size="small"
              v-if="scope.row.serviceStatus == '合同到期'"
              @click="startServe(scope.row)"
              >开始服务</el-button
            >
                  <el-button
              type="text"
              size="small"
              v-if="scope.row.serviceStatus == '未签合同'"
              @click="startServe(scope.row)"
              >开始服务</el-button
            >
            <el-button type="text" size="small" @click="addcontract(scope.row)"
              >合同</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="deleteInfo(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="添加"
        :visible.sync="dialogFormVisible"
        center
        width="40%"
      >
        <el-form
          :model="form"
          label-width="100px"
          label-position="top"
          class="input_from"
        >
          <el-row>
            <el-col :span="11" :offset="1">
              <el-form-item label="ID：">
                <el-input v-model="form.id" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="身份证：">
                <el-input
                  v-model="form.card"
                  autocomplete="off"
                  placeholder="请输入身份证"
                ></el-input>
              </el-form-item>
              <el-form-item label="年龄：">
                <el-input
                  v-model="form.age"
                  autocomplete="off"
                  placeholder="请输入年龄"
                ></el-input>
              </el-form-item>
              <el-form-item label="爱好特长：">
                <el-input
                  v-model="form.hobby"
                  autocomplete="off"
                  placeholder="请输入爱好特长"
                ></el-input>
              </el-form-item>
              <el-form-item label="电话：">
                <el-input
                  v-model="form.tel"
                  autocomplete="off"
                  placeholder="请输入电话"
                ></el-input>
              </el-form-item>
              <el-form-item label="通讯地址：">
                <el-input
                  v-model="form.address"
                  autocomplete="off"
                  placeholder="请输入通讯地址"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="1">
              <el-form-item label="头像：">
                <Imgupload @getimgUrl="getURL"></Imgupload>
              </el-form-item>
              <el-form-item label="姓名：">
                <el-input
                  v-model="form.name"
                  autocomplete="off"
                  placeholder="请输入姓名"
                ></el-input>
              </el-form-item>

              <el-form-item label="性别：">
                <el-select v-model="form.sex" placeholder="请选择性别">
                  <el-option label="男" value="1"></el-option>
                  <el-option label="女" value="0"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="健康状况：">
                <el-input
                  v-model="form.healthStatus"
                  autocomplete="off"
                  placeholder="请输入健康状态"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="亲属关系：">
            <el-row>
              <el-col :span="7" :offset="1"
                ><el-input
                  v-model="form.relationname1"
                  autocomplete="off"
                  placeholder="请输入姓名"
                ></el-input>
                <el-input
                  v-model="form.relationname2"
                  autocomplete="off"
                  placeholder="请输入姓名"
                ></el-input>
              </el-col>
              <el-col :span="7" :offset="1"
                ><el-input
                  v-model="form.relation1"
                  autocomplete="off"
                  placeholder="请输入关系"
                ></el-input>
                <el-input
                  v-model="form.relation2"
                  autocomplete="off"
                  placeholder="请输入关系"
                ></el-input>
              </el-col>
              <el-col :span="7" :offset="1"
                ><el-input
                  v-model="form.relationtel1"
                  autocomplete="off"
                  placeholder="请输入电话"
                ></el-input>
                <el-input
                  v-model="form.relationtel2"
                  autocomplete="off"
                  placeholder="请输入电话"
                ></el-input>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addSure">确 定</el-button>
        </div>
      </el-dialog>
    </el-main>
    <el-dialog
      title="合同"
      :visible.sync="contractdialogFormVisible"
      width="30%"
      center
    >
      <el-form label-position="top">
        <el-form-item label="合同日期:" :label-width="contractformLabelWidth">
          <el-date-picker
            v-model="value1"
            value-format="timestamp"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="合同照片：">
          <Imgupload @getimgUrl="getURL" :getURL2="imageUrl2"></Imgupload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="contractdialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addcontractSure">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="添加"
      :visible.sync="editdialogFormVisible"
      center
      width="40%"
    >
      <el-form
        :model="editform"
        label-width="100px"
        label-position="top"
        class="input_from"
      >
        <el-row>
          <el-col :span="11" :offset="1">
            <el-form-item label="ID：">
              <el-input v-model="editform.id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="身份证：">
              <el-input
                v-model="editform.card"
                autocomplete="off"
                placeholder="请输入身份证"
              ></el-input>
            </el-form-item>
            <el-form-item label="年龄：">
              <el-input
                v-model="editform.age"
                autocomplete="off"
                placeholder="请输入年龄"
              ></el-input>
            </el-form-item>
            <el-form-item label="爱好特长：">
              <el-input
                v-model="editform.hobby"
                autocomplete="off"
                placeholder="请输入爱好特长"
              ></el-input>
            </el-form-item>
            <el-form-item label="电话：">
              <el-input
                v-model="editform.tel"
                autocomplete="off"
                placeholder="请输入电话"
              ></el-input>
            </el-form-item>
            <el-form-item label="通讯地址：">
              <el-input
                v-model="editform.address"
                autocomplete="off"
                placeholder="请输入通讯地址"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item label="头像：">
              <Imgupload @getimgUrl="getURL" :getURL2="imageUrl2"></Imgupload>
            </el-form-item>
            <el-form-item label="姓名：">
              <el-input
                v-model="editform.name"
                autocomplete="off"
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>

            <el-form-item label="性别：">
              <el-select v-model="editform.sex" placeholder="请选择性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="0"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="健康状况：">
              <el-input
                v-model="editform.healthStatus"
                autocomplete="off"
                placeholder="请输入健康状态"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="亲属关系：">
          <el-row>
            <el-col :span="7" :offset="1"
              ><el-input
                v-model="editform.relationname1"
                autocomplete="off"
                placeholder="请输入姓名"
              ></el-input>
              <el-input
                v-model="editform.relationname2"
                autocomplete="off"
                placeholder="请输入姓名"
              ></el-input>
            </el-col>
            <el-col :span="7" :offset="1"
              ><el-input
                v-model="editform.relation1"
                autocomplete="off"
                placeholder="请输入关系"
              ></el-input>
              <el-input
                v-model="editform.relation2"
                autocomplete="off"
                placeholder="请输入关系"
              ></el-input>
            </el-col>
            <el-col :span="7" :offset="1"
              ><el-input
                v-model="editform.relationtel1"
                autocomplete="off"
                placeholder="请输入电话"
              ></el-input>
              <el-input
                v-model="editform.relationtel2"
                autocomplete="off"
                placeholder="请输入电话"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editdialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSure">确 定</el-button>
      </div>
    </el-dialog>
    <el-main style="padding: 10px 0px">
      <Paging
        @pagesizeChange="getPagesize"
        @currentPageChange="getCurrentPage"
        :total="total"
        :pagesize="pagesize"
        :currentPage="currentPage"
      ></Paging>
    </el-main>
  </el-container>
</template>
<style lang="less" scoped>
.search {
  background-color: #fff;
  margin-top: 10px;
  border-radius: 5px;
}
</style>
  <script>
import Paging from "../../components/paging/paging.vue";
import Pagetitle from "../../components/common/title.vue";
import Imgupload from "../../components/upload_img/uploadImg.vue";
import Bus from "../../EventBus";

export default {
  data() {
    return {
      tableData: [],
      title1: "残疾人管理",
      title2: "残疾人管理",
      id: "", //
      rowdata: "",
      currentPage: 1, //当前页数
      total: 5, //总共多少条，这个需要通过接口获取后赋值
      pagesize: 4, //有2，4，6，8，10可选
      dialogFormVisible: false,
      contractdialogFormVisible: false,
      editdialogFormVisible: false,
      nodate: "",
      imageUrl: "",
      imageUrl2: "",
      value1: [],
      editform: {
        uid: "",
        name: "",
        id: "",
        card: "",
        age: "",
        hobby: "",
        tel: "",
        address: "",
        sex: "",
        healthStatus: "",
        relationname1: "",
        relationname2: "",
        relation1: "",
        relation2: "",
        relationtel1: "",
        relationtel2: "",
      },
      formInline: {
        name: "",
        type: "",
        date: "",
        ID: "",
        IDnum: "",
        tel: "",
      },
      form: {
        name: "",
        id: "",
        card: "",
        age: "",
        hobby: "",
        tel: "",
        address: "",
        sex: "",
        healthStatus: "",
        relationname1: "",
        relationname2: "",
        relation1: "",
        relation1: "",
        relationtel1: "",
        relationtel2: "",
      },
      formLabelWidth: "120px",
      contractformLabelWidth: "50px",
    };
  },
  components: {
    Pagetitle,
    Paging,
    Imgupload,
  },
  methods: {
    //编辑信息接口
    editInfo(row) {
      console.log(row);
      this.editform.uid = row.id;
      this.editform.name = row.name;
      this.editform.id = row.userId;
      this.imageUrl2 = row.image;
      this.editform.card = row.card;
      this.editform.age = row.age;
      this.editform.hobby = row.hobby;
      this.editform.tel = row.phone;
      this.editform.address = row.address;
      row.sex == 0 ? (this.editform.sex = "女") : (this.editform.sex = "男");
      this.editform.healthStatus = row.healthStatus;
      this.editform.relationname1 = row.relationship.relationname1;
      this.editform.relationname2 = row.relationship.relationname2;
      this.editform.relation1 = row.relationship.relation1;
      this.editform.relation2 = row.relationship.relation2;
      this.editform.relationtel1 = row.relationship.relationtel1;
      this.editform.relationtel2 = row.relationship.relationtel2;
      this.editdialogFormVisible = true;
    },
    editSure() {
      this.imageUrl == ""
        ? (this.imageUrl = this.imageUrl2)
        : (this.imageUrl2 = this.imageUrl),
        (this.editdialogFormVisible = false);
      this.editform.sex = "女"
        ? (this.editform.sex = 0)
        : (this.editform.sex = 1);
      var relationship = {
        relationname1: this.editform.relationname1,
        relationname2: this.editform.relationname2,
        relation1: this.editform.relation1,
        relation2: this.editform.relation2,
        relationtel1: this.editform.relationtel1,
        relationtel2: this.editform.relationtel2,
      };
      this.editData(
        this.editform.name,
        this.editform.address,
        this.editform.age,
        this.editform.card,
        this.editform.hobby,
        this.editform.id,
        this.imageUrl,
        this.editform.tel,
        relationship,
        this.editform.healthStatus,
        this.editform.sex,
        this.editform.uid
      );
    },

    handleClick(data) {
      this.rowdata = data;
      console.log(this.rowdata);
      this.$router.push({ name: "DisabledInfo" });
    },
    //添加接口
    async editData(
      name,
      address,
      age,
      card,
      hobby,
      userId,
      image,
      phone,
      relationship,
      healthStatus,
      sex,
      id
    ) {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/disabled/update",
        data: {
          name: name,
          address: address,
          age: age,
          card: card,
          healthStatus: healthStatus,
          hobby: hobby,
          image: image,
          userId: userId,
          phone: phone,
          relationship: relationship,
          sex: sex,
          id: id,
        },
      });
      if (res.code == 0) {
        this.imageUrl2 = "";
        this.imageUrl = "";
        this.getListData(this.currentPage, this.pagesize);
      }
      console.log(res);
    },
    //子组件传入pagesize
    getPagesize(val) {
      this.pagesize = val;
      console.log(this.pagesize);
      this.getListData(
        this.currentPage,
        this.pagesize,
        this.formInline.name,
        this.formInline.class,
        this.formInline.date,
        this.formInline.ID,
        this.formInline.IDnum,
        this.formInline.tel
      );
    },
    getdate() {
      nodate = new Date().getTime();
    },
    //添加
    addcontractSure() {
      console.log(this.value1);
      this.imageUrl == ""
        ? (this.imageUrl = this.imageUrl2)
        : (this.imageUrl2 = this.imageUrl),
        (this.contractdialogFormVisible = false);
      var date1 = this.value1[0];
      var date2 = this.value1[1];
      this.addcontracta(this.imageUrl, date1, date2, this.id);
    },
    async addcontracta(img, date1, date2, id) {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/disabled/updateContractById",
        data: {
          contractImage: img,
          contractValidity: date2,
          effectiveTime: date1,
          id: id,
        },
      });
      if (res.code == 0) {
        console.log("上传合同数据成功");
        this.imageUrl2 = "";
        this.imageUrl = "";
        this.getListData(this.currentPage, this.pagesize);
      }
    },
    //子组件传入CurrentPage
    getCurrentPage(val) {
      this.currentPage = val;
      console.log(this.currentPage);
      this.getListData(
        this.currentPage,
        this.pagesize,
        this.formInline.name,
        this.formInline.class,
        this.formInline.date,
        this.formInline.ID,
        this.formInline.IDnum,
        this.formInline.tel
      );
    },
    addcontract(row) {
      this.contractdialogFormVisible = Boolean(1);
      this.id = row.id;
      (this.value1 = new Array()),
        (this.value1[1] = new Date(row.contractValidity)),
        (this.value1[0] = new Date(row.effectiveTime)),
        console.log(this.value1);
      this.imageUrl2 = row.contractImage;
    },
    //获取页面
    async getListData(
      page,
      pageSize,
      name,
      runStatus,
      registerTime,
      card,
      userId,
      phone
    ) {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/disabled/list",
        data: {
          card: card,
          name: name,
          page: page,
          pageSize: pageSize,
          phone: phone,
          registerTime: registerTime,
          serviceStatus: runStatus,
          userId: userId,
        },
      });
      console.log(res.data);
      if (res.code == 0) {
        this.total = res.count;
        res.data.forEach((item) => {
          console.log(item);
          item.serviceStatus = this.statusTransfrom(
            item.serviceStatus,
            item.contractValidity
          );

          item.registerTime = this.timeTransfer(item.registerTime);
        });
        //this.tableData.splice(0, this.tableData.length);
        // res.data.forEach((item) => {
        //   // console.log(item);
        //   let newTime = this.timeTransfer(item.created);
        //   item.created = newTime;
        //   item.status = this.statusTransfer(item.status);
        // });
        // console.log(res.data)
        this.tableData = res.data;
        this.tableData.forEach((item) => {
          let newTime = this.timeTransfer(item.contractValidity);
          item.contractValidity = newTime;
        });
        if (this.tableData.length == 1) {
          this.currentPage = this.currentPage - 1;
        }
      }
    },
    //查找接口
    searchData() {
      this.getListData(
        this.currentPage,
        this.pagesize,
        this.formInline.name,
        this.formInline.class,
        this.formInline.date,
        this.formInline.ID,
        this.formInline.IDnum,
        this.formInline.tel
      );
    },
    timeTransfer(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    //zhuangtaizhuanhuan
    statusTransfrom(item, item2) {
      if (item ==2) {
        item = "合同到期";
      } else if (item == 0) {
        item = "服务停止";
      } else if (item == 1) {
        item = "服务中";
      }else if (item == 3) {
        item = "未签合同";
      }
      return item;
    },
    //确认添加
    addSure() {
      var timestamp = new Date().getTime();
      this.dialogFormVisible = false;
      var relationship = {
        relationname1: this.form.relationname1,
        relationname2: this.form.relationname2,
        relation1: this.form.relation1,
        relation2: this.form.relation2,
        relationtel1: this.form.relationtel1,
        relationtel2: this.form.relationtel2,
      };
      this.addData(
        this.form.id,
        this.form.address,
        this.form.age,
        this.form.card,
        this.form.hobby,
        this.imageUrl,
        this.form.name,
        this.form.tel,
        timestamp,
        relationship,
        this.form.healthStatus,
        this.form.sex
      );
    },
    //添加接口
    async addData(
      id,
      address,
      age,
      card,
      hobby,
      image,
      name,
      phone,
      registerTime,
      relationship,
      healthStatus,
      sex
    ) {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/disabled/add",
        data: {
          address: address,
          age: age,
          card: card,
          healthStatus: healthStatus,
          hobby: hobby,
          image: image,
          name: name,
          phone: phone,
          registerTime: registerTime,
          relationship: relationship,
          sex: sex,
          userId: id,
        },
      });
      if (res.code == 0) {
        this.getListData(this.currentPage, this.pagesize);
        this.form.id = "";
        this.form.address = "";
        this.form.age = "";
        this.form.card = "";
        this.form.hobby = "";
        this.imageUrl = "";
        this.form.name = "";
        this.form.tel = "";
        this.form.healthStatus = "";
        this.form.sex = "";
        this.form.relationname1 = "";
        this.form.relationname2 = "";
        this.form.relation1 = "";
        this.form.relation2 = "";
        this.form.relationtel1 = "";
        this.form.relationtel2 = "";
      }
      console.log(res);
    },
    //删除信息
    deleteInfo(index, row) {
      this.$confirm("此操作将删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.deleData(row.id);
          this.$message({
            type: "success",
            message: "删除成功!",
            duration: 700,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
            duration: 700,
          });
        });
    },
    getURL(data) {
      this.imageUrl = data;
    },
    //调用删除接口
    async deleData(seeId) {
      const { data: res } = await this.axios({
        method: "GET",
        url: "/disabled/delete/" + seeId,
      });
      if (res.code == 0) {
        console.log("删除成功");
        this.getListData(this.currentPage, this.pagesize);
      }
    },
    //服务停止点击事件
    stopServe(item) {
      this.$confirm("此操作将停止服务, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        this.editform.serviceStatus = 0;
        this.serviceStatus(this.editform.serviceStatus, item.id);
      });
    },
    //服务开始点击事件
    startServe(item) {
      this.$confirm("此操作将开始服务, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        this.editform.serviceStatus = 1;
        this.serviceStatus(this.editform.serviceStatus, item.id);
      });
    },
    async serviceStatus(serviceStatus, id) {
      const { data: res } = await this.axios({
        method: "POST",
        url:
          "/disabled/updateStatus?" + `id=${id}&serviceStatus=${serviceStatus}`,
      });
      if (res.code == 0) {
        this.getListData(this.currentPage, this.pagesize);
      }
      console.log(res);
    },
  },
  // setup(){
  //     const msg2 = ref("这是传级子组件的信息2")
  //     return {
  //         msg2
  //     }
  // },
  created() {
    this.getListData(this.currentPage, this.pagesize);
  },
  beforeDestroy() {
    Bus.$emit("val", this.rowdata);
  },
};
</script>